import React from "react";
import { Observer } from "mobx-react";

import { Context } from "../../../../../store/MyContext";

import "antd/dist/antd.css";
import { Table, Modal, Switch } from "antd";
import DropOption from "../DropOption/DropOption";

// export default function List() {
//   return <div></div>;
// }

// 表格数据 for dead data
const data = [];
for (let i = 0; i < 46; i++) {
  data.push({
    key: i,
    proId: `${i}`,
    proName: `Edward King ${i}`,
    cost: 9,
    sales: 0,
    address: `London, Park Lane no. ${i}`,
    status: 0,
    salesNum: 9,
  });
}

// 确认模态框
const { confirm } = Modal;

class List extends React.Component {
  state = {
    checkSetItem: [],
  };

  async componentDidMount() {
    try {
    } catch (err) {}
  }

  //删除点击事件
  onDeleteItem = (id) => {
    const { deleteItem } = this.props;
    deleteItem(id);
  };

  //编辑事件
  onEditItem = (item) => {
    this.context.showAddModal();
    this.context.getsingleCheckItem(item);
  };

  start = () => {
    this.setState({ loading: true });

    setTimeout(() => {
      this.setState({
        selectedRowKeys: [],
        loading: false,
      });
    }, 1000);
  };

  onSelectChange = (selectedRowKeys) => {
    this.setState({ selectedRowKeys });
    this.props.selectOption(selectedRowKeys);
  };

  handleMenuClick = (record, e) => {
    if (e.key === "1") {
      this.onEditItem(record);
    } else if (e.key === "2") {
      confirm({
        title: `Are you sure delete this record?`,
        onOk() {
          this.onDeleteItem(record.phy_id);
        },
      });
    }
  };

  showConfirm = (id, checked) => {
    let that = this;
    confirm({
      title: `是否${checked ? "关闭" : "开启"}此体检单项?`,
      content: "",
      okText: "确认",
      cancelText: "取消",
      style: { padding: "32px 20px" },
      onOk() {
        that.onChangeSwitch(id, checked);
      },
      onCancel() {
        console.log("Cancel");
      },
    });
  };

  onChangeSwitch = (id, checked) => {
    this.props.onChangeSwitchStatus(id, checked);
  };

  render() {
    const { tableData, selectedRowKeys } = this.props;

    const rowSelection = {
      selectedRowKeys,
      onChange: this.onSelectChange,
    };

    const columns2 = [
      {
        title: "项目ID",
        dataIndex: "phy_proId",
      },
      {
        title: "项目名称",
        dataIndex: "phy_projectName",
      },
      {
        title: "原价",
        dataIndex: "phy_oldPrice",
      },
      {
        title: "售价",
        dataIndex: "phy_salePrice",
      },
      {
        title: "适用地区",
        dataIndex: "area",
      },
      {
        title: "是否启用",
        dataIndex: "state",
        render: (text, record) => (
          <Switch
            checkedChildren='启用'
            unCheckedChildren='停用'
            onChange={() => this.showConfirm(record.phy_id, text)}
            checked={text}
            key={record.phy_id}
          />
        ),
      },
      {
        title: "订购数量",
        dataIndex: "phy_salesNum",
      },
      {
        title: "操作",
        key: "operation",
        fixed: "right",
        width: "8%",
        render: (text, record) => {
          return (
            <DropOption
              onMenuClick={(e) => this.handleMenuClick(record, e)}
              menuOptions={[
                { key: "1", name: `Update` },
                { key: "2", name: `Delete` },
              ]}
            />
          );
        },
      },
    ];

    return (
      <Observer>
        {() => (
          <div>
            <Table
              rowSelection={rowSelection}
              rowKey='phy_id'
              columns={columns2}
              dataSource={tableData}
            />
          </div>
        )}
      </Observer>
    );
  }
}
List.contextType = Context;
export default List;
